<template>
    <div>
        <!-- 头部搜索部分 -->
        <div>
            <div style="display: flex; justify-content: space-between; margin-top: 20px; padding-left: 20px;">
                <div>
                    <el-input v-model="profName" clearable class="search" size="small" style="border-radius: 15px; overflow: hidden;" :disabled="showAdvanceSearchVisible" placeholder="请输入专家名进行搜索..." @keydown.enter.native="initEmps" @clear="initEmps">
                        <el-button slot="append" icon="el-icon-search" :disabled="showAdvanceSearchVisible" @click="initEmps" />
                    </el-input>
                    <el-button :icon="showAdvanceSearchVisible?'el-icon-caret-bottom':'el-icon-caret-right'" style="border-radius: 12px; background-color: #0080ff; color: #f5f2f0; margin-left: 10px;" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">高级搜索</el-button>
                </div>
                <div style="margin-right: 20px;">
                    <el-upload style="display: inline-flex; margin-right: 8px;" :headers="headers" :show-file-list="false" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" :disabled="importDataDisabled" action="/system/prof/import">
                        <el-button type="success" :icon="importDataBtnIcon" :disabled="importDataDisabled">{{ importDataBtnText }}</el-button>
                    </el-upload>
                    <el-button type="success" icon="el-icon-download" @click="exportData">导出数据</el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">添加专家</el-button>
                </div>
            </div>
        </div>
        <!-- 高级搜索板块 -->
        <transition name="slide-fade">
            <div v-show="showAdvanceSearchVisible" style="border: 2px solid #409eff; border-radius: 5px; box-sizing: border-box; padding: 5px; margin: 10px 0;">
                <el-row style="margin-top: 10px;">
                    <el-col :span="6" style="margin-left: 30px;">
                        工作单位:
                        <el-input v-model="emps.unitName" prefix-icon="el-icon-edit" placeholder="请输入工作单位" clearable style="width: 220px;" @keydown.enter.native="initEmps('advanced')" />
                    </el-col>
                    <el-col :span="5">
                        专家组名:
                        <el-select v-model="emps.groupName" placeholder="请选择" style="width: 120px;">
                            <el-option v-for="(item,index) in groups" :key="index" :label="item" :value="item" />
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        主要从事专业:
                        <el-input v-model="emps.currentMajor" prefix-icon="el-icon-edit" placeholder="请输入主要从事专业" clearable style="width: 250px;" @keydown.enter.native="initEmps('advanced')" />
                    </el-col>
                    <el-col :span="5" :offset="9" style="margin-top: 20px;">
                        <el-button type="primary" size="medium" plain @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">取消</el-button>
                        <el-button type="primary" size="medium" @click="initEmps('advanced')">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
        </transition>
        <!-- 专家信息表格 -->
        <div style="margin-top: 20px;">
            <el-table v-loading="loading" :data="emps" stripe border style="width: 100%;" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-table-column fixed type="index" prop="id" align="center" label="序号" width="70" />
                <el-table-column prop="profName" align="center" label="专家姓名" width="90" fixed />
                <el-table-column prop="userSex" align="center" label="性别" width="70" />
                <el-table-column prop="highestEducation" align="center" label="学历" width="70" />
                <el-table-column prop="profTitle" align="center" label="职称" width="70" />
                <el-table-column prop="unitName" label="工作单位" align="center" />
                <el-table-column prop="profPost" align="center" label="职务" width="120" />
                <el-table-column prop="currentMajor" align="center" label="主要从事专业" />
                <el-table-column prop="profPhone" align="center" label="联系电话" width="130" />
                <el-table-column prop="profRemark" align="center" label="备注" width="90" />
                <el-table-column prop="groupName" align="center" label="所属小组" width="100" />
                <el-table-column align="center" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button style="padding: 3px;" type="primary" size="mini" @click="showCheckExpView(scope.row)">查看高级资料</el-button>
                        <el-button style="padding: 3px;" type="danger" size="mini" @click="deleteEmp(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
                <el-pagination background layout="sizes, prev, pager, next,jumper, ->, total" :total="total" @current-change="currentChange" @size-change="sizeChange" />
            </div>
        </div>
        <!-- 添加专家弹窗 -->
        <el-dialog title="添加专家" :visible.sync="dialogVisible" width="70%">
            <div>
                <el-form ref="addForm" :model="emp" :rules="rules">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="专家姓名:" prop="profName">
                                <el-input v-model="emp.profName" size="small" prefix-icon="el-icon-edit" placeholder="请输入专家姓名" clearable style="width: 155px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="性别:" prop="userSex">
                                <el-radio-group v-model="emp.userSex">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="学历:" prop="highestEducation">
                                <el-select v-model="emp.highestEducation" size="small" placeholder="请选择" style="display: flex; width: 120px;">
                                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="职称:" prop="profTitle">
                                <el-select v-model="emp.profTitle" size="small" placeholder="请选择" style="display: flex; width: 175px;">
                                    <el-option v-for="(item,index) in jobLevel" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="工作单位:" prop="unitName">
                                <el-input v-model="emp.unitName" size="small" prefix-icon="el-icon-edit" placeholder="请输入工作单位" clearable style="width: 350px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="主要从事专业:" prop="currentMajor">
                                <el-input v-model="emp.currentMajor" size="small" prefix-icon="el-icon-edit" placeholder="请输入主要从事专业" clearable style="width: 350px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="专家组名称:" prop="groupName">
                                <el-select v-model="emp.groupName" size="small" placeholder="请选择" style="display: flex; width: 155px;">
                                    <el-option v-for="(item,index) in groups" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="备注:" prop="profRemark">
                                <el-input v-model="emp.profRemark" size="small" prefix-icon="el-icon-edit" placeholder="请输入备注" clearable style="width: 150px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="职务:" prop="profPost">
                                <el-input v-model="emp.profPost" size="small" prefix-icon="el-icon-message" placeholder="请输入职务" clearable style="width: 135px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="手机号:" prop="profPhone">
                                <el-input v-model="emp.profPhone" size="small" prefix-icon="el-icon-phone" placeholder="请输入手机号" clearable style="width: 165px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAddEmp">确 认 添 加</el-button>
            </span>
        </el-dialog>
        <!-- 查看专家高级资料弹窗 -->
        <el-dialog class="dialog-component" title="专家高级资料详情" :visible.sync="dialogVisible1" width="60%">
            <div>
                <el-form ref="checkForm" :model="exp">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="专家姓名:" prop="profName">
                                <el-input v-model="exp.profName" placeholder="输入专家姓名" prefix-icon="el-icon-edit" clearable style="width: 145px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="性别:" prop="userSex">
                                <el-radio-group v-model="exp.userSex">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="学历:" prop="highestEducation">
                                <el-select v-model="exp.highestEducation" placeholder="请选择" style="display: flex; width: 120px;">
                                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="职称:" prop="profTitle">
                                <el-select v-model="exp.profTitle" placeholder="请选择" style="display: flex; width: 200px;">
                                    <el-option v-for="(item,index) in jobLevel" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="工作单位:" prop="unitName">
                                <el-input v-model="exp.unitName" placeholder="请输入工作单位" prefix-icon="el-icon-edit" clearable style="width: 520px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="职务:" prop="profPost">
                                <el-input v-model="exp.profPost" placeholder="请输入职务" prefix-icon="el-icon-edit" clearable style="width: 150px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="主要从事专业:" prop="currentMajor">
                                <el-input v-model="exp.currentMajor" placeholder="请输入主要从事专业" prefix-icon="el-icon-edit" clearable style="width: 495px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="联系电话:" prop="profPhone">
                                <el-input v-model="exp.profPhone" placeholder="请输入电话" prefix-icon="el-icon-edit" clearable style="width: 150px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="所属专家组:" prop="groupName">
                                <el-select v-model="exp.groupName" placeholder="请选择" style="display: flex; width: 140px;">
                                    <el-option v-for="(item,index) in groups" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="备注:" prop="profRemark">
                                <el-input v-model="exp.profRemark" placeholder="请输入备注" prefix-icon="el-icon-edit" clearable style="width: 135px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="证件类型:" prop="certifiType">
                                <el-select v-model="exp.certifiType" placeholder="请选择" style="display: flex; width: 110px;">
                                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="证件号:" prop="certifiId">
                                <el-input v-model="exp.certifiId" placeholder="请输入证件号" prefix-icon="el-icon-edit" clearable style="width: 200px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="政治面貌:" prop="politicName">
                                <el-select v-model="exp.politicName" placeholder="政治面貌" style="width: 155px;">
                                    <el-option v-for="(item,index) in politics" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="民族:" prop="nationName">
                                <el-select v-model="exp.nationName" placeholder="请选择" style="width: 140px;">
                                    <el-option v-for="(item,index) in nation" :key="index" :label="item" :value="item" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="籍贯:" prop="residence">
                                <el-input v-model="exp.residence" placeholder="请输入籍贯" prefix-icon="el-icon-edit" clearable style="width: 140px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="毕业院校:" prop="graduateSchool">
                                <el-input v-model="exp.graduateSchool" placeholder="请输入毕业院校" prefix-icon="el-icon-edit" clearable style="width: 190px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="所学专业:" prop="profMajor">
                                <el-input v-model="exp.profMajor" placeholder="输入所学专业" prefix-icon="el-icon-edit" clearable style="width: 155px;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="单位类型:" prop="unitType">
                                <el-select v-model="exp.unitType" placeholder="请选择" style="display: flex; width: 115px;">
                                    <el-option v-for="item in options2" :key="item.val" :label="item.lab" :value="item.val" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="专家状态:" prop="profStatus">
                                <el-select v-model="exp.profStatus" placeholder="请选择" style="display: flex; width: 110px;">
                                    <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <div class="first">
                                <span>加入时间：</span>
                                <span>{{ exp.createTime }}</span>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="first">
                                <span>过期时间：</span>
                                <span>{{ exp.passTime }}</span>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="savaChange">保 存 修 改</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    name: 'ExpertManagementIndex',
    data() {
        return {
            profName: '', // 搜索框根据专家姓名搜索
            showAdvanceSearchVisible: false, // 高级搜索
            headers: {
                Authorization: localStorage.getItem('token')
            },
            importDataDisabled: false,
            importDataBtnText: '导入数据',
            importDataBtnIcon: 'el-icon-upload2',
            options1: [{
                value: '选项1',
                label: '居民身份证'
            }, {
                value: '选项2',
                label: '港澳台通行证'
            }],
            options4: [{
                value: '选项1',
                label: '正常'
            }, {
                value: '选项2',
                label: '过期'
            }, {
                value: '选项3',
                label: '退出'
            }],
            options3: [{
                value: '选项1',
                label: '博士'
            }, {
                value: '选项2',
                label: '硕士'
            }, {
                value: '选项3',
                label: '本科'
            }, {
                value: '选项4',
                label: 'MBA'
            }, {
                value: '选项5',
                label: '大专'
            }, {
                value: '选项6',
                label: '中专'
            }, {
                value: '选项7',
                label: '高中'
            }, {
                value: '选项8',
                label: '初中'
            }, {
                value: '选项9',
                label: '小学'
            }, {
                value: '选项10',
                label: '其他'
            }],
            options2: [{
                val: '选项1',
                lab: '企业'
            }, {
                val: '选项2',
                lab: '政府机构'
            }, {
                val: '选项3',
                lab: '公益性机构'
            }, {
                val: '选项4',
                lab: '高校'
            }, {
                val: '选项5',
                lab: '科研院所'
            }, {
                val: '选项6',
                lab: '其他'
            }],
            groups: [], // 专家组下拉选择
            politics: [], // 政治面貌下拉选择
            nation: [], // 民族下拉选择
            jobLevel: [], // 职称下拉选择
            emps: [],
            loading: false,
            total: 0,
            page: 1,
            size: 10,
            dialogVisible: false,
            dialogVisible1: false,
            emp: {},
            exp: {}, // 高级资料绑定数据
            rules: { // 校验,与prop名对应
                profName: [
                    { required: true, trigger: 'blur', message: '请输入专家姓名' } // 没输入时会弹出提醒
                ],
                userSex: [
                    { required: true, trigger: 'change', message: '请选择性别' }
                ],
                highestEducation: [
                    { required: true, trigger: 'change', message: '请选择学历' }
                ],
                unitName: [
                    { required: true, trigger: 'blur', message: '请输入所在单位' }
                ],
                unitType: [
                    { required: true, trigger: 'change', message: '请选择单位类型' }
                ],
                groupName: [
                    { required: true, trigger: 'change', message: '请选择专家组' }
                ],
                profPhone: [
                    { required: true, trigger: 'blur', message: '请输入手机号' },
                    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, trigger: 'blur', message: '手机号码不正确' }
                ],
                currentMajor: [
                    { required: true, trigger: 'blur', message: '请输入主要从事专业' }
                ]
            }
        }
    },
    watch: {
        profName(val, oldVal) {
            if (val === '' || val === null) {
                this.initEmps()
            }
        }
    },
    created() {
        this.initEmps()
    },
    methods: {
        savaChange() { // 确认保存修改专家高级资料
            this.$refs['checkForm'].validate(valid => {
                if (valid) {
                    this.putRequest('/system/prof/updateProfInfo', this.exp).then(resp => {
                        if (resp) {
                            this.dialogVisible1 = false
                            Message.success('更新成功')
                            this.initEmps()
                        }
                    })
                }
            })
        },
        onSuccess() {
            this.importDataBtnIcon = 'el-icon-upload2'
            this.importDataBtnText = '导入数据'
            this.importDataDisabled = false
            this.initEmps()
        },
        onError() {
            this.importDataBtnIcon = 'el-icon-upload2'
            this.importDataBtnText = '导入数据'
            this.importDataDisabled = false
        },
        beforeUpload() {
            this.importDataBtnIcon = 'el-icon-loading'
            this.importDataBtnText = '正在导入'
            this.importDataDisabled = true
        },
        doAddEmp() { // 添加专家
            this.$refs['addForm'].validate(valid => {
                if (valid) {
                    this.postRequest('/system/prof/addProf', this.emp).then(resp => { // 添加专家确认事件,需要参数是整个专家对象
                        if (resp) {
                            this.dialogVisible = false
                            Message.success('添加成功')
                            this.initEmps()
                        }
                    })
                }
            })
        },
        initGroups() { // 获取‘专家组’下拉选择信息
            this.getRequest('/system/prof/getGroups').then(resp => {
                if (resp) {
                    this.groups = resp.data
                }
            })
        },
        initPolitics() { // 获取‘政治面貌’下拉选择信息
            this.getRequest('/system/prof/getPolitics').then(resp => {
                if (resp) {
                    this.politics = resp.data
                }
            })
        },
        initNation() { // 获取‘民族’下拉选择信息
            this.getRequest('/system/prof/getNations').then(resp => {
                if (resp) {
                    this.nation = resp.data
                }
            })
        },
        initJobLevel() { // 获取‘职称’下拉选择信息
            this.getRequest('/system/cfg/joblevel/info').then(resp => {
                if (resp) {
                    this.jobLevel = resp.data
                }
            })
        },
        exportData() {
            this.downloadRequest('/system/prof/export')
        },
        deleteEmp(data) { // 删除一条专家信息
            this.$confirm('此操作将永久删除  ' + data.profName + ',是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/prof/deleteProf/', data.id).then(resp => {
                    if (resp) {
                        Message.success('删除成功')
                        this.initEmps()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        showAddEmpView() { // 添加专家按钮绑定弹窗事件
            this.dialogVisible = true
        },
        showCheckExpView(row) { // 添加查看高级资料按钮绑定弹窗事件
            this.dialogVisible1 = true
            this.exp = row
        },
        sizeChange(size) {
            this.size = size
            this.initEmps()
        },
        currentChange(currentPage) {
            this.page = currentPage
            this.initEmps()
        },
        initEmps(type) { // 初始获取专家信息表格数据
            let url = '/system/prof/getInfo/?page=' + this.page + '&size=' + this.size
            if (type === 'advanced') {
                if (this.emps.unitName) {
                    url += '&unitName=' + this.emps.unitName
                }
                if (this.emps.groupName) {
                    url += '&groupName=' + this.emps.groupName
                }
                if (this.emps.currentMajor) {
                    url += '&currentMajor=' + this.emps.currentMajor
                }
            } else {
                url += '&profName=' + this.profName
            }
            this.initGroups()
            this.initPolitics()
            this.initNation()
            this.initJobLevel()
            this.loading = true
            this.getRequest(url).then(resp => {
                this.loading = false
                if (resp) {
                    this.emps = resp.data.data
                    this.total = resp.data.total
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.search { // 搜索框
    border: solid #0080ff;
    width: 300px;
    border-radius: 12px;
}
::v-deep .el-input-group__append { // 搜索按钮-->
    background-color: #0080ff;
    border-top-right-radius: 11px;
    border-bottom-right-radius: 11px;
    border: 0;
}
::v-deep .el-icon-search { // 搜索的图标-->
    color: #fff;
    font-size: 25px;
    font-weight: bolder;
}
.slide-fade-enter-active {
    transition: all 0.8s ease;
}
.slide-fade-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
}
.first {
    display: flex;
    align-items: center;
    font-size: 14px;
}
</style>
